/******************************************************************
 * Copyright @ 2025 FImagine. All rights reserverd.
 * @file   frontend\src\views\ContactsView\ContactItem.tsx
 * @author Gim
 * @date   2025/08/06 10:26
 * @desc   联系人列表条目view
 ******************************************************************/

import { ButtonDevOnly } from "@/component/ButtonDevOnly";
import { Show } from "@/component/Display";
import { show_raw_jsons } from "@/utils/show_raw_jsons";
import { Flex, GetProps, List, Typography } from "antd";
import { useMemo } from "react";
import { IUIItem } from ".";
import styles from "./styles.module.scss";
const { Text } = Typography

export interface IAccountItemProps extends GetProps<typeof List.Item> {
  item: IUIItem;
  show_account?: boolean;
  show_is_friend?: boolean;
  show_username?: boolean;
  show_alias?: boolean
}

export function AccountItem(props: IAccountItemProps) {
  const {
    item,
    ..._p
  } = props


  const [title, desc] = useMemo(() => {
    const title = (
      <Flex justify='space-between' gap={10} align='center'>
        <Flex gap={10} align='center'>
          <Text className={styles.title}>
            {item.account}
          </Text>
          <Show yes={!!item.phone}>
            <Text type='secondary'>
              手机号码: <Text>{item.phone}</Text>
            </Text>
          </Show>
        </Flex>

        <Typography.Text type='secondary'>
          {item.platform} {item.version}
        </Typography.Text>
      </Flex >
    )
    const desc = (
      <Flex justify='space-between' gap={10}>
        <Flex gap={10} align='center'>
          <Typography.Text type='secondary'>
            更新时间: {item.updateTime}
          </Typography.Text>
          <Typography.Text type='secondary'>
            创建时间: {item.createTime}
          </Typography.Text>
          <Flex gap={10} style={{ flexShrink: 0 }}>
            <ButtonDevOnly label="原始数据" onClick={() => show_raw_jsons([item])} />
          </Flex>
        </Flex>
      </Flex>
    )
    return [title, desc];
  }, [item])

  return (
    <List.Item
      id={styles.account_list_item}
      className={styles.account_list_item}
      {..._p}>
      <List.Item.Meta
        title={title}
        description={desc}
      />
    </List.Item>
  )
}
